<html>
    <head>
        <title>Itowns - Globe with FlyControls</title>

        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                overflow:hidden;
                height:100%;
            }

            #viewerDiv {
                margin : auto auto;
                width: 100%;
                height: 100%;
                padding: 0;
            }

            #menuDiv {
                position: absolute;
                top:0px;
                margin-left: 0px;
            }

            #help {
                position: absolute;
                z-index: 0;
                top: 0;
                right: 0;
                color: white;
                color: #eee;
                font: 11px 'Lucida Grande',sans-serif;
                line-height: normal;
                text-shadow: 0 -1px 0 #111;
                padding: 0 1rem;
                background: #1a1a1a;
                border: 1px solid #2c2c2c;
                opacity: 0.8;
            }

            #help > p {
                margin: 0.5rem 0;
            }

            #help > ul {
                padding: 0 1rem;
            }
        </style>
        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="GUI/dat.gui/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="help">
            <p>Key bindings:</p>
            <ul>
              <li>↑ ↓ : forward / backward</li>
              <li>← → : strafe left / right</li>
              <li>⇞ (PageUp), ⇟ (PageDown) : roll right / left</li>
              <li>mouse Clic + drag : camera rotation</li>
            </ul>
        </div>
        <div id="viewerDiv"></div>
        <script src="GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="../dist/debug.js"></script>
        <script>
            var exports = {};
        </script>
        <script src="globe_fly.js"></script>
        <script type="text/javascript">
            /* global itowns, document, GuiTools, globeView, promises */
            var menuGlobe = new GuiTools('menuDiv');
            menuGlobe.view = globeView;
            flyControls.moveSpeed = 10000000;
            menuGlobe.gui.add(flyControls, 'moveSpeed', 10, 10000000).name('Movement speed');
            // Listen for globe full initialisation event
            globeView.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                console.info('Globe initialized');
                Promise.all(promises).then(function () {
                    menuGlobe.addImageryLayersGUI(globeView.getLayers(function (l) { return l.type === 'color'; }));
                    menuGlobe.addElevationLayersGUI(globeView.getLayers(function (l) { return l.type === 'elevation'; }));
                });
            });
        </script>
    </body>
</html>
